.rich-text-editor {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  overflow: hidden;

  .editor-toolbar {
    padding: 8px 12px;
    background: #fafafa;
    border-bottom: 1px solid #d9d9d9;
  }

  .editor-content {
    min-height: 300px;
    
    .ProseMirror {
      padding: 16px;
      outline: none;
      min-height: 280px;
      
      &:focus {
        outline: none;
      }

      // 图片样式
      .editor-image {
        max-width: 100%;
        height: auto;
        border-radius: 4px;
        margin: 8px 0;
        cursor: pointer;
        
        &:hover {
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
      }

      // 链接样式
      .editor-link {
        color: #1890ff;
        text-decoration: none;
        
        &:hover {
          text-decoration: underline;
        }
      }

      // 视频容器样式
      .video-wrapper {
        position: relative;
        width: 100%;
        margin: 16px 0;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        background: #000;
        
        iframe, video {
          width: 100%;
          height: 315px;
          border: none;
          display: block;
        }
        
        video {
          background: #000;
          
          &:focus {
            outline: none;
          }
        }
        
        // 不同视频平台的特殊样式
        &[data-video-type="youtube"] {
          background: #ff0000;
        }
        
        &[data-video-type="bilibili"] {
          background: #00a1d6;
        }
        
        &[data-video-type="tencent"] {
          background: #ff6600;
        }
        
        &[data-video-type="youku"] {
          background: #00a0e9;
        }
        
        // 响应式视频
        &::before {
          content: '';
          display: block;
          padding-top: 56.25%; // 16:9 宽高比
        }
        
        iframe, video {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
        
        // 加载状态
        &.loading {
          &::after {
            content: '正在加载视频...';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 14px;
          }
        }
      }

      // 段落样式
      p {
        margin: 8px 0;
        line-height: 1.6;
        
        &.is-editor-empty:first-child::before {
          content: attr(data-placeholder);
          float: left;
          color: #adb5bd;
          pointer-events: none;
          height: 0;
        }
      }

      // 标题样式
      h1, h2, h3, h4, h5, h6 {
        margin: 16px 0 8px 0;
        font-weight: 600;
        line-height: 1.4;
      }

      h1 { font-size: 2em; }
      h2 { font-size: 1.5em; }
      h3 { font-size: 1.25em; }
      h4 { font-size: 1.1em; }
      h5 { font-size: 1em; }
      h6 { font-size: 0.9em; }

      // 列表样式
      ul, ol {
        margin: 8px 0;
        padding-left: 24px;
        
        li {
          margin: 4px 0;
          line-height: 1.6;
        }
      }

      // 引用样式
      blockquote {
        border-left: 4px solid #1890ff;
        margin: 16px 0;
        padding: 8px 16px;
        background: #f6f8fa;
        color: #666;
        font-style: italic;
      }

      // 代码样式
      code {
        background: #f1f3f4;
        padding: 2px 4px;
        border-radius: 3px;
        font-family: 'Monaco', 'Consolas', monospace;
        font-size: 0.9em;
      }

      pre {
        background: #f6f8fa;
        border-radius: 6px;
        padding: 16px;
        margin: 16px 0;
        overflow-x: auto;
        
        code {
          background: none;
          padding: 0;
        }
      }

      // 分割线样式
      hr {
        border: none;
        border-top: 2px solid #e8e8e8;
        margin: 24px 0;
      }

      // 表格样式
      table {
        border-collapse: collapse;
        width: 100%;
        margin: 16px 0;
        
        th, td {
          border: 1px solid #d9d9d9;
          padding: 8px 12px;
          text-align: left;
        }
        
        th {
          background: #fafafa;
          font-weight: 600;
        }
      }

      // 选中状态
      ::selection {
        background: #b3d4fc;
      }
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    .editor-toolbar {
      padding: 6px 8px;
      
      .ant-space {
        gap: 4px !important;
      }
      
      .ant-btn {
        padding: 0 6px;
      }
    }
    
    .editor-content .ProseMirror {
      padding: 12px;
      
      .video-wrapper iframe,
      .video-wrapper video {
        height: 200px;
      }
    }
  }
}